<div class="content" [@loadingState]="(loading > 0) ? 'true' : 'false'">

    <br/>

    <loading-spinner [loading]="loading > 0"></loading-spinner>

    <div class="row">
        <div class="col-md-6 col-sm-6">
            <button type="button" class="btn btn-secondary" (click)="refresh()">
                Refresh
            </button>
        </div>
        <div class="col-md-6 col-sm-6">
            <evebox-filter-input
                    [queryString]="queryString"></evebox-filter-input>
        </div>
    </div>

    <br/>

    <div class="row">
        <div class="col">
            <div *ngIf="showCharts" style="height: 300px;">
                <canvas id="eventsOverTimeChart"
                        style="padding-top: 0px;"></canvas>
            </div>
            <div *ngIf="interval != ''" class="dropdown"
                 style="text-align:center;">
                <span class="mx-auto" data-toggle="dropdown">
                    <small><a
                            href="#">{{interval}} intervals</a></small>
                </span>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#"
                       (click)="changeHistogramInterval(item.value)"
                       *ngFor="let item of histogramIntervals">{{item.msg}}</a>
                </div>
            </div>
        </div>
    </div>

    <br/>

    <div *ngIf="showCharts" class="row mb-4">

        <div class="col-lg mb-4 mb-lg-0">
            <div class="card">
                <div class="card-header">Traffic ID</div>
                <div class="card-body">
                    <canvas id="trafficIdChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg">
            <div class="card">
                <div class="card-header">Traffic Labels</div>
                <div class="card-body">
                    <canvas id="trafficLabelChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-md-6">
            <report-data-table *ngIf="topClientsByFlows"
                               title="Top Clients By Flow Count"
                               [rows]="topClientsByFlows"
                               [headers]="['Flows', 'Client IP']"></report-data-table>
        </div>

        <div class="col-md-6">
            <report-data-table *ngIf="topServersByFlows"
                               title="Top Servers By Flow Count"
                               [rows]="topServersByFlows"
                               [headers]="['Flows', 'Server IP']"></report-data-table>
        </div>

    </div>

    <br/>

    <div *ngIf="topFlowsByAge" class="card">
        <div class="card-header">
            <b>Top Flows by Age</b>
        </div>
        <eveboxEventTable2 [rows]="topFlowsByAge"
                           [showEventType]="false"
                           [showActiveEvent]="false"></eveboxEventTable2>
    </div>

    <br/>

</div>